<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>

    <title>Password Update Form</title>
    <link href="../../static/css/cas.css" rel="stylesheet" th:remove="tag" />

    <script th:inline="javascript">
      /*<![CDATA[*/

      var policyPattern = /*[[${policyPattern}]]*/;
      var passwordStrengthI18n = {
          0: /*[[#{screen.pm.password.strength.0}]]*/,
          1: /*[[#{screen.pm.password.strength.1}]]*/,
          2: /*[[#{screen.pm.password.strength.2}]]*/,
          3: /*[[#{screen.pm.password.strength.3}]]*/,
          4: /*[[#{screen.pm.password.strength.4}]]*/
      };

      /*]]>*/
    </script>
</head>
<body>
<main role="main" class="container mt-3 mb-3">
    <div>
        <h3 th:utext="${expiredPass} ? #{screen.expiredpass.heading} : #{screen.mustchangepass.heading}">Change Password Heading</h3>
        <form id="passwordManagementForm" th:if="${passwordManagementEnabled}" method="post" th:object="${password}">
            <div class="alert alert-danger alert-dismissible fade show" th:if="${#fields.hasErrors('*')}">
                <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                <span th:each="err : ${#fields.errors('*')}" th:utext="${err}">Error text</span>
            </div>

            <div class="form-group">
                <span class="fa fa-lock"></span>&nbsp;<label for="password" th:utext="#{screen.pm.enterpsw}">Enter Password:</label>&nbsp;
                <input class="form-control" type="password" id="password" th:field="*{password}" required/>
            </div>
            <div class="form-group">
                <span class="fa fa-lock"></span>&nbsp;<label for="confirmedPassword" th:utext="#{screen.pm.confirmpsw}">Confirm Password:</label>&nbsp;
                <input class="form-control" type="password" id="confirmedPassword" th:field="*{confirmedPassword}" required/>
            </div>

            <div class="form-group">
                <div>
                    <span th:text="#{screen.pm.password.strength}">Strength:</span>&nbsp;
                    <span id="password-strength-icon" class="fas" aria-hidden="true"></span>
                </div>
                <div class="progress">
                    <div id="strengthProgressBar" class="progress-bar"></div>
                </div>
                <div id="password-strength-msg" class="suggestions alert alert-warning alert-dismissible fade show" role="alert" style="display: none;">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <span class="fas fa-exclamation-circle" aria-hidden="true"></span>&nbsp;
                    <span id="password-strength-warning"></span>&nbsp;
                    <span id="password-strength-suggestions"></span>
                </div>
            </div>
            <div class="form-group" id="password-strength-notes">
                <div id="password-policy-violation-msg" class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <span class="fas fa-exclamation-circle" aria-hidden="true"></span>&nbsp;
                    <strong th:text="#{screen.pm.password.policyViolation}">Password does not match the password policy requirement.</strong>
                </div>
                <div id="password-confirm-mismatch-msg" class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
                    <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
                    <span class="fas fa-exclamation-circle" aria-hidden="true"></span>&nbsp;
                    <strong th:text="#{screen.pm.password.confirmMismatch}">Passwords do not match.</strong>
                </div>
            </div>

            <div class="form-group text-center">
                <input type="hidden" name="execution" th:value="${flowExecutionKey}"/>
                <input type="hidden" name="_eventId" value="submit"/>
                <input class="btn btn-submit"
                       name="submit"
                       accesskey="s"
                       th:value="#{screen.pm.button.submit}"
                       th:attr="data-processing-text=#{screen.welcome.button.loginwip}"
                       value="SUBMIT"
                       id="submit"
                       type="submit"
                       disabled="true"/>
                &nbsp;
                <a class="btn btn-danger" th:href="@{/login}" th:text="#{screen.pm.button.cancel}">CANCEL</a>
            </div>
        </form>
        <p th:unless="${passwordManagementEnabled}"
           th:utext="${expiredPass} ? #{screen.expiredpass.message('https://pwd.example.org')} : #{screen.mustchangepass.message('https://pwd.example.org')}">Expired/Must
            Change Password text</p>
    </div>
</main>
</body>
</html>
